<!-- 事件管理 -->
<template>
    <div class="edit-left-event">
        <el-collapse :modelValue="['1', '2']" class="collapse-wrap">
            <el-collapse-item name="1">
                <template #title>
                    <div class="collapse-title">
                        页面事件
                    </div>
                </template>
                <div class="collapse-content">
                    <el-button
                        type="primary"
                        :disabled="disabledAddBtn"
                        class="collapse-add-btn"
                        @click="onAddPageEvent"
                    >
                        添加事件
                    </el-button>
                    <div class="content-list">
                        <template v-if="disabledAddBtn">
                            <div class="no-data-txt">该页面不能添加事件</div>
                        </template>
                        <template v-else>
                            <template v-if="pageFx.length > 0">
                                <template v-for="(item, index) in pageFx" :key="index">
                                    <div class="content-list-item">
                                        <div :title="item.fxTitle" class="left-wrap">
                                            <el-tag v-if="isCustomPageEvent(item.fxName)" size="small">自定义</el-tag>
                                            {{ item.fxTitle }}
                                        </div>
                                        <div class="right-wrap">
                                            <el-icon title="设置" @click.stop="onEditPageEvent(item)"><icon-edit-outline /></el-icon>
                                            <el-icon title="删除" @click.stop="onRemovePageEvent(pageFx, index)"><icon-delete /></el-icon>
                                        </div>
                                    </div>
                                </template>
                            </template>
                            <div v-else class="no-data-txt">暂无数据</div>
                        </template>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>

        <event-setting ref="eventSettingRef" />
    </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useEditStore } from '@/store'
import { ElMessageBox } from 'element-plus'
import useEventData from '@/libs/edit/eventData'
import EventSetting from './components/event-setting.vue'
export default defineComponent({
    name: 'EditLeftEvent',
    components: {
        EventSetting
    },
    setup() {
        const {
            pageEvents
        } = useEventData()

        const eventSettingRef = ref(null)

        const editStore = useEditStore()
        const pageData = computed(() => editStore.pageData)
        const pageType = computed(() => editStore.pageType)
        // 事件数据
        const fxData = computed({
            get: () => pageData.value?.customFeature?.fx,
            set: val => pageData.value.customFeature.fx = val
        })
        // 页面事件
        const pageFx = computed({
            get: () => fxData.value?.pageFx || [],
            set: val => fxData.value.pageFx = val
        })
        // 控件事件
        const widgetFx = computed({
            get: () => fxData.value?.widgetFx || [],
            set: val => fxData.value.widgetFx = val
        })
        const widgetListFlat = computed(() => editStore.widgetListFlat)
        const disabledAddBtn = computed(() => ![2].includes(pageType.value))

        // 是否是页面自定义事件
        const isCustomPageEvent = name => {
            return pageEvents.every(item => item.value != name)
        }
        // 添加页面事件
        const onAddPageEvent = () => {
            if (!fxData.value) {
                fxData.value = {
                    pageFx: [],
                    widgetFx: []
                }
            }
            eventSettingRef.value.show({
                type: 'page'
            }).then(data => {
                pageFx.value.push(data)
            }).catch(() => {})
        }
        // 编辑页面事件
        const onEditPageEvent = eventData => {
            eventSettingRef.value.show({
                type: 'page',
                data: eventData
            }).then(data => {
                Object.assign(eventData, data)
            }).catch(() => {})
        }
        // 删除页面事件
        const onRemovePageEvent = (list, index) => {
            ElMessageBox.confirm('确定删除此事件?', '提示', {
                type: 'warning',
            }).then(() => {
                list.splice(index, 1)
            }).catch(() => {})
        }

        return {
            eventSettingRef,

            pageFx,
            widgetFx,
            widgetListFlat,
            disabledAddBtn,

            isCustomPageEvent,
            onAddPageEvent,
            onEditPageEvent,
            onRemovePageEvent
        }
    }
})
</script>

<style lang="less" scoped>
@import './edit-left-event.less';
</style>